<template>
  <div class="home">
    <!-- 欢迎区域 -->
    <el-card class="greeting-card">
      <div class="greeting-content">
        <el-avatar :size="60" :src="setting.avatar" />
        <div class="greeting-text">
          <h2>{{ greeting }}，{{ userStore.user.name }}！</h2>
          <p class="sub-text">今天是 {{ currentDate }}，欢迎使用 {{ setting.title }}！</p>
        </div>
      </div>
    </el-card>

    <!-- 安全数据卡片 -->
    <el-row :gutter="20" class="data-cards"  v-if="isSuperAdmin">
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover">
          <div class="card-content">
            <div class="card-left">
              <div class="card-value">{{ securityData.onlineUsers }}</div>
              <div class="card-label">当前在线用户</div>
            </div>
            <div class="card-icon" style="background-color: #409EFF">
              <el-icon :size="32" color="#fff">
                <User />
              </el-icon>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover">
          <div class="card-content">
            <div class="card-left">
              <div class="card-value">{{ securityData.abnormalLogins }}</div>
              <div class="card-label">异常登录尝试</div>
            </div>
            <div class="card-icon" style="background-color: #F56C6C">
              <el-icon :size="32" color="#fff">
                <Warning />
              </el-icon>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover">
          <div class="card-content">
            <div class="card-left">
              <div class="card-value">{{ securityData.suspiciousIPs }}</div>
              <div class="card-label">可疑IP地址</div>
            </div>
            <div class="card-icon" style="background-color: #E6A23C">
              <el-icon :size="32" color="#fff">
                <Opportunity />
              </el-icon>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover">
          <div class="card-content">
            <div class="card-left">
              <div class="card-value">{{ securityData.activeSessions }}</div>
              <div class="card-label">活跃会话数</div>
            </div>
            <div class="card-icon" style="background-color: #67C23A">
              <el-icon :size="32" color="#fff">
                <Connection />
              </el-icon>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 安全事件时间线 -->
    <el-card class="security-events-card"  v-if="isSuperAdmin" header="最近安全事件">
      <el-timeline>
        <el-timeline-item
            v-for="(event, index) in securityEvents"
            :key="index"
            :timestamp="event.time"
            placement="top"
            :type="event.severity"
        >
          <el-tag :type="getEventTagType(event.severity)">{{ event.title }}</el-tag>
          <p>{{ event.description }}</p>
          <p v-if="event.ip" class="event-detail">IP: {{ event.ip }} | 位置: {{ event.location }}</p>
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<script setup name="Index">
import useUserStore from '@/store/modules/user.js'
import {computed, ref} from 'vue'
import setting from "@/setting.js";
import { User, Warning, Opportunity, Connection } from '@element-plus/icons-vue'

// 获取用户信息
const userStore = useUserStore()

// 当前日期
const currentDate = computed(() => {
  return new Date().toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  })
})

// 安全状态
const securityStatus = computed(() => {
  return securityData.value.abnormalLogins > 0 ? '异常' : '正常'
})

// 动态问候语
const greeting = computed(() => {
  const hour = new Date().getHours()
  if (hour < 6) return '凌晨好'
  if (hour < 9) return '早上好'
  if (hour < 12) return '上午好'
  if (hour < 14) return '中午好'
  if (hour < 18) return '下午好'
  return '晚上好'
})

// 安全数据
const securityData = ref({
  onlineUsers: 24,
  abnormalLogins: 3,
  suspiciousIPs: 2,
  activeSessions: 18
})

// 安全事件
const securityEvents = ref([
  {
    time: '2023-10-21 10:30',
    title: '异常登录尝试',
    description: '检测到多次失败的登录尝试',
    severity: 'danger',
    ip: '103.45.67.89',
    location: '美国 加利福尼亚'
  },
  {
    time: '2023-10-21 09:45',
    title: '新设备登录',
    description: '用户 admin 从新设备登录',
    severity: 'warning',
    ip: '192.168.1.100',
    location: '中国 北京'
  },
  {
    time: '2023-10-21 08:15',
    title: '可疑IP访问',
    description: '检测到来自高风险地区的访问',
    severity: 'warning',
    ip: '45.67.89.123',
    location: '俄罗斯 莫斯科'
  },
  {
    time: '2023-10-20 23:10',
    title: '用户强制下线',
    description: '管理员强制下线了可疑会话',
    severity: 'success',
    ip: '103.45.67.89',
    location: '美国 加利福尼亚'
  }
])

// 获取事件标签类型
const getEventTagType = (severity) => {
  const map = {
    'danger': 'danger',
    'warning': 'warning',
    'success': 'success',
    'info': 'info'
  }
  return map[severity] || 'info'
}

// 判断是否为超级管理员
const isSuperAdmin = computed(() => {

  return userStore.role.roleKey === 'admin'
})


</script>

<style scoped lang="scss">
.home {
  font-size: 16px;
  overflow-x: hidden;

  .greeting-card {
    margin-bottom: 20px;

    .greeting-content {
      display: flex;
      align-items: center;
      padding: 20px;

      .greeting-text {
        margin-left: 20px;

        h2 {
          margin: 0;
          font-size: 24px;
          color: #1ab394;
        }

        .sub-text {
          margin: 8px 0 0;
          color: #0884ac;
          font-size: 14px;
        }
      }
    }
  }

  .data-cards {
    margin-bottom: 20px;

    .card-content {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .card-left {
        .card-value {
          font-size: 24px;
          font-weight: bold;
          margin-bottom: 8px;
        }

        .card-label {
          color: #909399;
          font-size: 14px;
        }
      }

      .card-icon {
        width: 50px;
        height: 50px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .online-users-card {
    margin-bottom: 20px;
  }

  .security-events-card {
    .event-detail {
      color: #909399;
      font-size: 12px;
      margin-top: 5px;
    }
  }
}
</style>